<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
      <div class="page page-current">
        <header class="bar bar-nav fs-header">
          <a href="${ctx.host}" class="fs-logo"><img src="${ctx.resource}/image/icon/icon-logo.png"></a>
          <a href="javascript:;" class="fs-menu pull-right" data-panel='#panel-right-menu'><i class="icon icon-menu"></i></a>
        </header>
        <!-- Block button in standard bar fixed below top bar -->
        <div class="bar-tab bar-header-secondary fs-tab-menu" style="position: absolute; background: #f7f7f8; width: 100%;">
          <div class=" tab-menu-box" style="width: 100%;">
            <c:choose>
              <c:when test="${not empty distributorId}">
                <a class="tab-item external" href="${ctx.host}/index?distributorId=${distributorId}">商城首页</a>
                <a class="tab-item external ${type eq 'online' ? 'active' : ''}" href="${ctx.host}/products?type=online&distributorId=${distributorId}">线上营</a>
                <a class="tab-item external ${type eq 'offline' ? 'active' : ''}" href="${ctx.host}/products?type=offline&distributorId=${distributorId}">线下营</a>
                <%-- <a class="tab-item external ${type eq 'others' ? 'active' : ''}" href="${ctx.host}/products?type=others&distributorId=${distributorId}">周边</a> --%>
                <!-- <a class="tab-item external " href="${ctx.host}/credit-mall">积分商城</a> -->
              </c:when>
              <c:otherwise>
                <a class="tab-item external" href="${ctx.host}/index">商城首页</a>
                <a class="tab-item external ${type eq 'online' ? 'active' : ''}" href="${ctx.host}/products?type=online">线上营</a>
                <a class="tab-item external ${type eq 'offline' ? 'active' : ''}" href="${ctx.host}/products?type=offline">线下营</a>
                <%-- <a class="tab-item external ${type eq 'others' ? 'active' : ''}" href="${ctx.host}/products?type=others">周边</a> --%>
                <!-- <a class="tab-item external " href="${ctx.host}/credit-mall">积分商城</a> -->
              </c:otherwise>
            </c:choose>
          </div>
        </div>
        <div class="content no-bottom">
          <div class="content-padded" style="margin: .3rem;">
            <div class="row fs-product-list">
              <c:forEach var="product" items='${products}'>
                <div class="col-50 product-card">
                
                  <c:choose>
                    <c:when test="${not empty product.address and product.type.others}"> 
                      <a href="${product.address}" class="clearfix">
                    </c:when>
                    <c:otherwise>
                      <c:if test="${not empty distributorId}">
                        <a href="${ctx.host}/products/${product.id}/view?source=index&distributorId=${distributorId}" class="clearfix">
                      </c:if>
                      <c:if test="${empty distributorId}">
                        <a href="${ctx.host}/products/${product.id}/view?source=index" class="clearfix">
                      </c:if>
                    </c:otherwise>
                  </c:choose>
                    
                    <img alt="" src="${cloud.prod}/${product.cover}-qrcode">
                    <div class="product-card-info">
                      <h2 class="product-title">${product.name}&nbsp;${product.course.individual ? product.course.hours : ''}${product.course.individual ? '课时' : ''}</h2>
                      <p class="product-labels clearfix">
                        <c:forEach var="tagMap" items="${product.tags}">
                          <label class="${tagMap.key}">${tagMap.value.name}</label>
                        </c:forEach>
                      </p>
                      <p class="product-price">
                        <span class="price-old">￥<fmt:formatNumber value="${product.basicOffer / 100}" pattern="#"/></span>
                        <strong class="price"><span>￥</span><fmt:formatNumber value="${product.currentOffer / 100}" pattern="0.00" maxFractionDigits="2" /></strong>
                      </p>
                    </div>
                  </a>
                  
                </div>
              </c:forEach>
            </div>
          </div>
        </div>
      </div>
    </div>
    
     <!-- panel-overlay -->
    <div class="panel-overlay"></div>
    <div class="panel panel-right panel-cover fs-panel" id='panel-right-menu'>
        <!-- list block -->
        <div class="list-block fs-list-group">
            <p class="panel-title"><a href="${ctx.host}/profile">个人中心</a></p>
            <ul>
              <li class="item-content item-link">
                <a href="${ctx.host}/index">
                    <div class="item-inner">
                      <div class="item-title">人马商城</div>
                    </div>
                </a>
              </li>
              <li class="item-content item-link"> 
                <a href="http://www.fit-start.co/msite/news">
                    <div class="item-inner">
                        <div class="item-title">活动新闻</div>
                    </div>
                </a>
              </li>
              <li class="item-content item-link"> 
                <a href="http://www.fit-start.co/msite/articles">
                    <div class="item-inner">
                        <div class="item-title">知识贴</div>
                    </div>
                </a>
              </li>
              <li class="item-content item-link"> 
                <a href="http://www.fit-start.co/msite/courses">
                    <div class="item-inner">
                        <div class="item-title">经典课程</div>
                    </div>
                </a>
              </li>
              <li class="item-content item-link"> 
                <a href="http://www.fit-start.co/msite/corporations">
                    <div class="item-inner">
                        <div class="item-title">企业课程</div>
                    </div>
                </a>
              </li>
              <li class="item-content item-link"> 
                <a href="http://www.fit-start.co/msite/about-us">
                    <div class="item-inner">
                        <div class="item-title">关于我们</div>
                    </div>
                </a>
              </li>
              <!-- <li class="item-content item-link"> 
                <a href="http://weixin.fit-start.co/credit-mall">
                    <div class="item-inner">
                        <div class="item-title">积分商城</div>
                    </div>
                </a>
              </li> -->
            </ul>
        </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/product/product.js" />
    <script type="text/javascript">
      
      var jsConfig = JSON.parse('${wechatJsConfig}')
      require(['page/product/product'], function(page) {
        page.init({
          jsConfig: jsConfig
        })
      })
    </script>
  </body>
</html>